<template>
  <div>
    <div class="container">
      <Header />
      <div class="cart_title">
        <div class="cart_lf">
          <div class="cart_logo"><img src="/images/logo.png" alt="" /></div>
          <div class="cart_text">
            <a href="">我的购物车</a>
          </div>
          <div class="cart_tips">
            <p>温馨提示:产品是否购买成功,以最终下单为准,请尽快结算</p>
          </div>
        </div>
        <div class="cart_rg">
          <div class="cart_username" v-show="name">{{ name }}</div>
        </div>
      </div>
      <div class="cart_content">
        <div class="cart-warp">
          <div class="cart-goods-list">
            <div class="list-head">
              <div class="cart cart-check">
                <input type="checkbox" v-model="checkAll" name="" id="" />
                全选
              </div>
              <div class="cart cart-img">&nbsp;</div>
              <div class="cart cart-name">商品名称</div>
              <div class="cart cart-price">单价</div>
              <div class="cart cart-num">数量</div>
              <div class="cart cart-total">小计</div>
              <div class="cart cart-action">操作</div>
            </div>
            <div
              class="list-content"
              v-for="(item, index) in cartShow"
              :key="index"
            >
              <div class="con con-check">
                <input type="checkbox" v-model="item.checked" />
              </div>
              <div class="con con-img">
                <img v-lazy="item.s_good.s_goods_photos[0].path" alt="" />
              </div>
              <div class="con con-name">{{ item.s_good.name }}</div>
              <div class="con con-price">{{ item.s_good.price }}元</div>

              <div>
                <a-input-number
                  id="inputNumber"
                  v-model="item.num"
                  :min="1"
                  :max="10"
                  @change="onChange(index)"
                />
                <!-- {{ item.num }} -->
              </div>

              <div class="con con-total">
                {{ item.s_good.price * item.num }}元
              </div>
              <div class="con con-action" @click="removeCart(item.id)">X</div>
            </div>

            <div class="cart-bar">
              <div class="section-left">
                <a href="">继续购物</a>
                <span class="cart-total">
                  共<em>{{ totalSum }}</em
                  >件商品,已选择<em>{{ selectCart }}</em
                  >件
                </span>
              </div>
              <div class="total-price">
                <span
                  >合计:<em>{{ totalPrice }}</em
                  >元</span
                >
                <a @click.prevent="order"><button>去结算</button></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  </div>
</template>


>


<script>
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
import {
  getCartInfo,
  getUserCartInfo,
  updateCartInfo,
  delCart,
  getUserInfo,
} from "@/assets/js/request.js";
import { mapActions, mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      cartList: [],
      userId: "",
    };
  },
  async created() {
    //获取用户信息
    // getUserInfo().then((res) => {
    //   this.userId = res.id;
    // });
    let res = await getCartInfo();
    console.log(res);
    this.cartList = res;
    getUserInfo().then((item) => {
      this.userId = item.id;
      // this.selectcartList();
    });
    // let res1 = await getUserInfo();
    // this.userId = res1.id;
  },
  computed: {
    ...mapState(["name"]),
    ...mapState("cart", ["cart"]),
    cartShow() {
      this.cartList.forEach((ele) => {
        console.log(ele);
        ele.checked = true;
      });
      this.cartList = JSON.parse(JSON.stringify(this.cartList));
      return this.cartList;
    },
    //总价
    totalPrice() {
      let Pricesum = 0;
      this.cartList.forEach((ele) => {
        // Pricesum += ele.num * ele.s_good.price;
        if (ele.checked) {
          Pricesum += ele.num * ele.s_good.price;
        }
      });
      return Pricesum;
    },
    //选中数量
    totalSum() {
      let num = 0;
      this.cartList.forEach((ele) => {
        num += ele.num;
      });
      return num;
    },
    //选中商品数量
    selectCart() {
      let num = 0;
      this.cartList.forEach((ele) => {
        if (ele.checked) {
          num += ele.num;
        }
      });
      return num;
    },
    // 商品数量
    totalcount() {
      let num = 0;
      this.cartList.forEach((ele) => {
        num += ele.num;
      });
      return this.totalcount;
    },
    //全选
    checkAll: {
      get() {
        if (this.cartList.length == 0) return false;
        return this.cartList.every((ele) => ele.checked == true);
      },
      set(value) {
        // this.cartList.forEach((item) => {
        // item.checked = value;
        // this.$set( target, key, value )
        // });
        this.updataChecked(value);
      },
    },
  },
  methods: {
    ...mapActions(["SaveUsername"]),
    //选择状态
    updataChecked(value) {
      this.cartList.forEach((ele) => {
        ele.checked = value;
      });
    },
    onChange(item) {
      updateCartInfo(item.id, {
        num: item.num,
      });
    },

    //判断用户id商品信息
    async selectUserId() {
      let res = await getUserCartInfo();
      console.log(res);
      this.cartList = res.filter((ele) => ele.user_id == this.userId);
    },

    //删除购物车商品
    removeCart(id) {
      delCart(id).then(() => {
        getCartInfo().then((res) => {
          this.cartList = res;
          console.log(res);
          this.$message.success("已成功删除您的商品");
        });
      });
    },
    // 下单购买
    order() {
      sessionStorage.setItem("checkout", JSON.stringify(this.cartList));
      this.$router.push("/orderConfirm");
    },
  },
  created() {
    getUserInfo().then((res) => {
      this.userId = res.id;
      this.selectUserId();
    });
  },

  components: {
    Header,
    Footer,
  },
};
</script>

<style lang="scss">
.cart_title {
  width: 100%;
  height: 100px;
  background-color: fff;
  margin: 0 auto;
  position: relative;
  .cart_lf {
    position: absolute;
    left: 15%;
    // display: inline-block;
    float: left;
    display: block;
    .cart_logo {
      margin: 20px 0;
      float: left;
      img {
        width: 50px;
        height: 50px;
      }
    }
    .cart_text {
      height: 100px;
      float: left;
      margin: 0 auto;
      a {
        display: block;
        margin: 0 auto;
        font-size: 22px;
        color: black;
        margin: 30px;
      }
    }
    .cart_tips {
      display: inline-block;
      width: 400px;
      height: 30px;
      margin: 0 auto;
      float: left;
      margin: 40px 0px;
      font-size: 10px;
      color: #666;
    }
  }
  .cart_rg {
    float: right;
    position: absolute;
    margin: 35px 0;
    right: 15%;
  }
}
.cart_content {
  border-top: 2px solid orangered;
  width: 100%;
  .cart-warp {
    width: 1226px;
    margin: 20px auto;
    background-color: #fff;
  }
  .list-head {
    height: 70px;
    line-height: 70px;
    padding-right: 25px;
    color: #424242;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e0e0e0;
    .cart {
      float: left;
      // display: block;
    }
    .cart-check {
      float: left;
      display: block;
      width: 110px;
    }
    .cart-img {
      width: 80px;
      height: 80px;
    }
    .cart-name {
      width: 380px;
      text-align: left;
      padding-left: 30px;
    }
    .cart-price {
      width: 140px;
      padding-right: 30px;
      text-align: center;
      color: #424242;
    }
    .cart-num {
      width: 150px;
      text-align: center;
      color: #424242;
    }
    .cart-total {
      width: 120px;
      padding-right: 35px;
      text-align: right;
    }
    .cart-action {
      width: 80px;
      text-align: center;
    }
  }
  .list-content {
    height: 70px;
    line-height: 70px;
    padding-right: 25px;
    color: #424242;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e0e0e0;

    .con {
      float: left;
      display: block;
    }
    .con-check {
      width: 110px;
      padding-right: 30px;
    }
    .con-img {
      width: 80px;
      height: 80px;
      padding-top: 5px;
      img {
        width: 50px;
        height: 40px;
      }
    }
    .con-name {
      width: 380px;
      text-align: left;
      padding-left: 10px;
    }
    .con-price {
      width: 140px;
      padding-right: 90px;
      text-align: center;
      color: #424242;
    }
    .con-num {
      width: 150px;
      text-align: center;
      color: #424242;
    }
    .con-total {
      width: 120px;
      padding-left: 35px;
      text-align: center;
    }
    .con-action {
      width: 80px;
      height: 80px;
      padding: 5px;
      text-align: center;
      color: #757575;
      & {
        cursor: pointer;
      }
    }
  }
  .cart-bar {
    height: 50px;
    text-align: right;
    background-color: #fff;

    .section-left {
      float: left;
      padding-top: 5px;
      a {
        line-height: 50px;
        margin-left: 30px;
        color: #424242;
      }
      .cart-total {
        border-left: 1px solid #eee;
        padding-left: 16px;
        margin-left: 16px;
        color: #757575;
      }
      em {
        color: #ff6700;
      }
    }
    .total-price {
      margin-top: 20px;
      border: 1px solid #eee;
      line-height: 50px;
      span {
        margin-right: 10px;
        color: #ff6700;
        em {
          padding: 0 5px;
          font-size: 24px;
        }
      }
      button {
        width: 200px;
        height: 50px;
        background-color: #ff6700;
        color: white;
        border: none;
        margin-left: 50px;
        font-size: 18px;
        line-height: 48px;
        vertical-align: top;
      }
    }
  }
}
</style>